$(function () {

    
    ws = new WebSocket("ws://101.200.150.2:8282");
    ws.onmessage = function (e) {
        let data = JSON.parse(e.data);
        let type = data.type || '';
        switch (type) {
            case "init" :   //表示初始化,并且获取用户id
                client_id = data.client_id;
                break;
            case "getNum" :   //实时获取平台在线人数
                $(".num").text(data.people_num);
                break;
            case "build":
                address= data.address!==undefined ? data.address :"";

                if (client_id != data.client_id) { //不是自己发送的
                    if (data.sex == 0) {   //男生

                        str = `<div class="message-box other-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                    <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/manhead.jpg" alt="">
                                        </div>
                                        <div class="message-info">
                                            <div class="message-username-icon">
                                                 <i class="layui-icon layui-icon-male" style="color: #1E9FFF;"></i>
                                                 ${data.user_name}
                                             </div>
                                             <div class="message-info-bg">
                                                ${data.message}
                                              </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`
                    } else {

                        str = `<div class="message-box other-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                    <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/girlhead.jpg" alt="">
                                        </div>
                                        <div class="message-info">
                                            <div class="message-username-icon">
                                                 <i class="layui-icon layui-icon-female" style="color: deeppink;"></i>
                                                  ${data.user_name}
                                             </div>
                                               <div class="message-info-bg">
                                                    ${data.message}
                                                </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`

                    }

                    $(".window").append(str)
                    $('.window').scrollTop($('.window')[0].scrollHeight);
                } else {    //自己发送的
                    if (data.sex == 0) {

                        str = `<div class="message-box me-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                  <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/manhead.jpg" alt="">
                                        </div>
                                        <div class="message-info">
                                            <div class="message-username-icon" >
                                                 <i class="layui-icon layui-icon-male" style="color: #1E9FFF;"></i>
                                                 ${data.user_name}
                                             </div>
                                             <div class="message-info-bg">
                                                ${data.message}
                                              </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`

                    } else {
                        str = `<div class="message-box me-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                      <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/girlhead.jpg" alt="">
                                        </div>
                                        <div class="message-info">
                                            <div class="message-username-icon" >
                                                 <i class="layui-icon layui-icon-female" style="color: deeppink;"></i>
                                                  ${data.user_name}
                                            </div>
                                            <div class="message-info-bg">
                                              ${data.message}
                                              </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`
                    }

                    $(".window").append(str)
                    $('.window').scrollTop($('.window')[0].scrollHeight);
                }
                break

            case "img": //对方发送的是图片
                address= data.address!==undefined ? data.address :"";
                if (client_id != data.client_id) { //不是自己发送的
                    if (data.sex == 0) {   //男生
                        str = `<div class="message-box other-message img-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                      <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/manhead.jpg" alt="">
                                        </div>
                                        <div class="message-info">
                                             <div class="message-username-icon" >
                                                <i class="layui-icon layui-icon-male" style="color: #1E9FFF;"></i>${data.user_name}
                                             </div>
                                             <div style="" style="margin-left: 10px;">
                                                <img src="${data.message}" alt="">
                                             </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`
                    } else {

                        str = `<div class="message-box other-message img-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                    <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/girlhead.jpg" alt="">
                                        </div>
                                        <div class="message-info">
                                            <div class="message-username-icon" >
                                             <i class="layui-icon layui-icon-female" style="color: deeppink;"></i>${data.user_name}
                                             </div>
                                          <div style="margin-left: 10px;"> 
                                           <img src="${data.message}" alt="">
                                           </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`

                    }

                    $(".window").append(str)
                    $('.window').scrollTop($('.window')[0].scrollHeight);
                } else {    //自己发送的
                    if (data.sex == 0) {

                        str = `<div class="message-box img-message me-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                    <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/manhead.jpg" alt="">
                                        </div>
                                        <div class="message-info ">
                                             <div class="message-username-icon" >
                                             <i class="layui-icon layui-icon-male" style="color: #1E9FFF;"></i>${data.user_name}
                                             </div>
                                           <div style=""> <img src="${data.message}" alt=""></div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`

                    } else {
                        str = `<div class="message-box img-message me-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                  <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/girlhead.jpg" alt="">
                                        </div>
                                        <div class="message-info">
                                            <div class="message-username-icon" >
                                             <i class="layui-icon layui-icon-female" style="color: deeppink;"></i>${data.user_name}
                                             </div>
                                           <div style=""><img src="${data.message}" alt=""></div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`
                    }

                    $(".window").append(str)
                    $('.window').scrollTop($('.window')[0].scrollHeight);
                }
                break

            case "audio":
                address= data.address!==undefined ? data.address :"";
                if (client_id != data.client_id) { //不是自己发送的
                    if (data.sex == 0) {   //男生
                        str = `<div class="message-box other-message img-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                      <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/manhead.jpg" alt="">
                                        </div>
                                        <div class="message-info message-info-audio">
                                            <div class="message-username-icon" >
                                                 <i class="layui-icon layui-icon-male" style="color: #1E9FFF;"></i>${data.user_name}
                                             </div>
                                             <div style="" >
                                                <div class="audio-progress" >
                                                     <img src="/Home/images/wxgreen.png" alt="" localId="${data.localId}" >
                                                     <span class="">语音已发送~点击微信logo播放</span>
                                                </div>
                                             </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`
                    } else {

                        str = `<div class="message-box other-message img-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                    
                                      <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/girlhead.jpg" alt="">
                                        </div>
                                        <div class="message-info message-info-audio">
                                            <div class="message-username-icon" >
                                             <i class="layui-icon layui-icon-female" style="color: deeppink;"></i>${data.user_name}
                                             </div>
                                          <div style="">  
                                             <div class="audio-progress" >
                                                     <img src="/Home/images/wxgreen.png" alt="" localId="${data.localId}" >
                                                     <span class="">语音已发送~点击微信logo播放</span>
                                                </div>
                                          </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`

                    }

                    $(".window").append(str)
                    $('.window').scrollTop($('.window')[0].scrollHeight);
                } else {    //自己发送的
                    if (data.sex == 0) {
                        str = `<div class="message-box img-message me-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                      <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/manhead.jpg" alt="">
                                        </div>
                                        <div class="message-info message-info-audio">
                                        
                                             <div class="message-username-icon" >
                                                 <i class="layui-icon layui-icon-male" style="color:#1E9FFF;"></i>${data.user_name}
                                              </div>
                                           <div style=""> 
                                               <div class="audio-progress" >
                                                    
                                                     <img src="/Home/images/wx.png" alt="" localId="${data.localId}">
                                                     <span class="">语音已发送~点击微信logo播放</span>
                                                </div>
                                           </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`

                    } else {
                        str = `<div class="message-box img-message me-message">
                                    <div class="time">
                                        ${data.date}
                                    </div>
                                      <div class="address">
                                        <p>${address}</p>
                                    </div>
                                    <div class="message-item">
                                        <div class="head">
                                            <img src="/Home/images/girlhead.jpg" alt="">
                                        </div>
                                        <div class="message-info message-info-audio">
                                             <div class="message-username-icon" >
                                                 <i class="layui-icon layui-icon-female" style="color: deeppink;"></i>${data.user_name}
                                             </div>
                                           <div style="">
                                                 <div class="audio-progress" >
                                                     <img src="/Home/images/wx.png" alt="" localId="${data.localId}" >
                                                     <span class="">语音已发送~点击微信logo播放</span>
                                                </div>
                                           </div>
                                        </div>
                                    <div class="layui-clear"></div>
                                    </div>

                                </div>`
                    }

                    $(".window").append(str)
                    $('.window').scrollTop($('.window')[0].scrollHeight);
                }
                break
            case "exit":
            
                layer.open({
                  title: '温馨提示~'
                  ,content: '对方貌似退出了呢~您是否选择返回大厅呢?',
                  btn:['是的','取消任何操作'],
                  btn1: function(index, layero){
                     window.location.reload();
                   },
                   btn2:function(index,layero){
                     
                   },
                });   
                break
        }
    };
})